Accesibilidad Web
es pensar en todos

UTN FRRO - 2014

Pablo Botta

Pablo Botta

Algunos detalles para que me conozcan un poco mejor...

• Ingeniero en Sistemas de la UTN
• Desarrollador Web (desde el 2008)
• MCT 2011 - Sitios compatibles entre navegadores
• MCT 2013 - Accesibilidad Web Guía Práctica
• Colaborador en A11y Project
• Creador de Accesibilidad Web Argentina

Organización de la charla

• Introducción a la Accesibilidad Web y su problemática
• Ejemplos de sitios con barreras y sitios accesibles
• Beneficios del desarrollo accesible
• Consejos básicos para un contenido Web accsible

Analogía para entender la
accesibilidad Web

En nuestro entorno cotidiano (la web) y a pesar de que las personas (usuarios) cuenten con herramientas, tales como una silla de ruedas, para disminuir sus dificultades (tecnologías de apoyo, por ejemplo un lector de pantalla) existen lugares públicos o privados (sitios web) que NO tienen las condiciones para recibirlos (Accesibilidad Web).

Discapacidad en números

Aproximadamente el 15% de la personas en el mundo están afectadas por algún tipo de discapacidad. (13 veces la población Argentina)

En Argentina aproximadamente el 12.7% de la población sufre de algún tipo de discapacidad (5 millones de personas). En 2003 el valor era del 8% se estima a que se debe por el envejecimiento de la población.

Fuente: World Report on Disability 2011 - OMS
Fuente: Censo Nacional de Población, Hogares y Viviendas 2010. INDEC

Barreras de accesibilidad

Situaciones que generan que cierto grupo de personas no puedan acceder a un determinado contenido.

Imágenes sin alternativas textuales

Infografías, gráficos, textos en imágenes

El sitio Progam.AR del Estado Nacional utiliza toda imágenes sin alternativas textuales resultando ser su sitio totalmente innaccesible.

Los textos utilizados dentro de imágenes, imposibilitan a personas que con problemas visuales no puedan acceder al contenido. A su vez esta información no estará disponible para los buscadores (impactará negativamente en el SEO).

No todas las imágenes requieren alternativas

Pero aquellas que transmiten información, sí

CAPTCHA: Separando humanos de máquinas desde 1998

Se trata de una prueba desafío-respuesta utilizada para determinar cuándo el usuario es o no un ser humano. Mal implemetada puede resultar ser una barrera para personas con dificultades.

Sitios innacesibles mediante teclado

En el sitio de Garbarino hay lugares de la página que no se pueden acceder por teclado.

En el sitio de la facultad hay enlaces de la página que no se pueden mediante teclado.

HTML inválido o esacasa semántica

En el sitio del API de Santa Fe hay opciones de selección no funcionan adecuadamente. Disminuyendo su compatibilidad en plataformas sin mecanismos de seleción tan precisos como el mouse.

Esto también se nota en los sitios de la casa de electrodomésticos y de la facultad donde esos enlaces que no recibían foco es porque no eran enlaces propiamente dichos.

Legibilidad de los textos

Cuando un texto no es presentado de manera correcta incluso a cualquier persona le puede resultar difícil poder leerlo e interpretarlo.

Ejemplos: Sitio Web UTN - Regional Rosario y Portal de trámites Santa Fe

¿Por qué no se desarrolla accesible?

(Opinión Personal)

La accesibilidad Web NO es una tendencia

Existe la creencia entre los desarrolladores y los dueños de negocio que no existe público beneficiado por la Accesibilidad Web, además que no es tema de gran debate.

Fuente: Google Trends, Net Market Share y Stats Counter

Entnces, ¿por qué debería aplicarla?

Imagen cortesía de Tsahi Levent-Levi

Sus beneficios son para TODOS

Los principios de la accesibilidad forman parte de la Usabilidad y la Experiencia del Usuario.

Su implementación en sitios Web beneficia a todas las personas y no solo a aquellas que tienen un algún tipo de dificultad.

"Discapacitados temporales"

Las estadísticas anteriores no tienen en cuenta que todos podemos quedar temporalmente disminuidos, siendo entonces el número de personas afectadas, en un período de tiempo, aún mayor.

Imagen cortesía de Cameron Parkins

Otros grupos beneficiados directamente

• Personas mayores
• Personas que carezcan de estudios o que no sean nativas en la lengua del sitio Web
• Personas con conexiones lentas o que utilizan tecnologías desactualizadas
• Nuevos usuarios o usuarios infrecuentes del sitio

Fuente: Web Accessibility Web Standards and Regulatory Compliance

Aumenta las conversiones

La aplicación de técnicas de Accesibilidad Web mejora la facilidad de uso, legibilidad y comprensión del contenido en la Web. Ampliando la audiencia para nuestro sitio.

TESCO (cadena multinacional de locales de venta al por menor) aumentó su ganancias en 13 millones de euros anuales incorporando diseño accesible para personas no videntes. ^[1]

Virgin incremento 68% sus ventas incorporando diseño accesible. ^[2]

Legal & General aumentó un 300% sus conversiones y disminuyó un 10% su tasa de rebote tras aplicar un nuevo diseño accesible. ^[3]

Por normativa

En Argentina como en otros países del mundo los sitios Web gubernamentales están obligados a ser accesibles.

La ley de Accesibilidad de la información en las páginas web (n° 26.653) se encuentra en vigencia desde el 4 de mayo de 2013.

Obligando a los sitios alcanzados (poderes del Estado Nacional, organismos autárquicos o descentralizados, entes públicos, empresas públicas y las empresas privadas contratistas del Estado) a desarollar sus sitios de manera accesible o a adecuar sus sitios actuales a las normativas de Accesibilidad Web Internacionales (WCAG).

Accesibilidad Web en Argentina (sitios gubernamentales)

Pautas de Accesibilidad para el contenido Web

El 98% de los sitios gubernamentales (dominios gob.ar/gov.ar) presentan al menos una barrera de acceso al contenido web..

Estos sitios fallan por lo menos en uno de los criterios de nivel A (los más básicos) propuestos en las pautas WCAG.

Otros beneficios

• Aumenta la interoperabildad (adaptación a distintos dispositivos y tecnologías)
• Mejora la velocidad de carga de los sitios

Finalmente ...

Para ser un buen tipo

Imagen cortesía de Kelly Sue

¿Cómo la aplico?

Técnicas prácticas de Accesibilidad Web

Consejos 80-20 (*)

Concentrarnos en un pequeño número de temas que tendrán efecto en una gran cantidad de barreras (Principio de Paretto).

Con un pequeño esfuerzo podemos mejorar ampliamente la accesibilidad Web de nuestros sitios.

(*) 80-20 es marketinero y no es 100% real.

HTML correcto y semnático

Barrera de accesibilidad

• Personas accediendo a la Web con medios no tradicionales (distintos a los navegadores) encuentra obstáculos para acceder a la información.
• Personas esperando un determinado comportamiento de la Web se encuentran con uno diferente.
• Lo que es en realidad (por ejemplo un button) no es lo que se dijo (div).

Utilizar HTML correcta y semánticamente

• Un

  <div class="boton-guardar">

  no es un botón.
• Un

  <span onclick="document.location='index.html'">

  no es un link.
• Un

  <span class="etiqueta">

  no es una etiqueta.
• Un

  <div class="page-title">

  no es un título.

Etiquetas para campos de entrada de datos

Los controles sin etiquetas no comunican a las personas con dificultades en la visión el objetivo de dicha entrada y tampoco los requisitos del mismo (ejemplo: es obligatorio).

<label title="Este campo es obligatorio" for="ctal">Número de Partida:</label>
<input type="text" name="cta1" id="cta1" />
                        

Beneficios del uso correcto del marcado

• Obtener comportamiento nativo para los elementos presentes en una Web, idéntico al de otras aplicaciones de la plataforma, compatible con el comportamiento que los usuarios están acostumbrados a esperar.
• Mejora la usabilidad, porque muchos de estos controles ya traen comportamiento nativo. Por ejemplo, los enlaces y botones ya tienen acceso por teclado o al hacer click en una etiqueta se hace foco en una control.
• Aumenta la interoperabilidad (compatibilidad entre dispositivos y navegadores) del sitio. Excepto con Internet Explorer 6,7 y 8.

Alternativas textuales a elementos
visuales

Barreras de accesibilidad

• Personas con discapacidad visual no pueden acceder al contenido no textual
• Toda información transmitida por una imagen, video o cualquier otro elemento visual debería tener una alternativa textual
• No todo se resuelve incluyendo el atributo alt

Formas de proporcionar alternativas textuales

<img alt="UTN Facultad Regional Rosario" src="imagenes/utn_logohome2.gif">

<button arial-label="Cerrar ventana">X</button>

<img longdesc="ventas.html#desc" alt="Ventas anuales 2013" src="/imagenes/grafico-ventas.png">
<div id="desc">
    <h3>Ventas anuales 2013</h3>
    <!-- Descripción larga del contenido del gráfico -->
    <p>Las ventas ...</p>
<div>
                        

Cómo ocultar contenido a los usuarios videntes

En ocaciones para dar una alternativa textual requerimos de texto extra que visualmente puede estropear el diseño de una página Web.

.visuallyhidden {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }
                        

CAPTCHA accesible

Utilizar sistemas que sean accesibles como reCAPTCHA

Otra alternativa es realizar directamente preguntas textuales.

Prueba que eres humano, ¿cuanto es dos más dos?

WAI-ARIA: Aplicaciones Web Accessibles

Es una especificación de la W3C que describe como incrementar la accesibilidad de las páginas Web, en particular, aquellas con contenido dinámico y con componentes de interfaz desarrollados con HTML, CSS y JavaScript.

• <button aria-label="cerrar">x</button> será leído como "botón cerrar".
• aria-hidden="true" representaría contenido textual que no debería ser leído.

Beneficios de las alternativas textuales

• Permite el acceso a personas con discapacidad visual.
• Incrementa el SEO del sitio. El ejemplo más concreto son las infografías en la Web. Que sin su alternativa textual, nunca su contenido sería indexado por los buscadores.

Accesible por teclado

Barreras de accesibilidad

• Personas con imposibilidad de utilizar un mouse no pueden acceder al contenido diseñado para ser accedido únicamente por ese dispositivo.
• Toda acción que pueda realizarse mediante el mouse debería poder efectuarse utilizando el teclado u otro dispositivo o medio.
• No todo se resuelve utilizando el atributo accesskey
• Las atajos de teclado no están debidamente señalizados.

Elementos que puedan recibir foco

Los elementos de HTML no reciben foco por defecto (salvo excepciones). En ocaciones necesitamos que así sea.

Mediante el atributo tabindex podemos lograr que un elemento reciba foco.

        <div tabindex="0" class="x-widget"><!-- contenido --></div>
                    

Si marcamos el valor en 0 recibirá foco de acuerdo al flujo natural del documento.

No retirar el outline de los elementos

Retirar el outline provoca que no se pueda saber que elemento tiene el foco, afecta a personas que navegan utilizando la vista y el teclado.

Algunos reset de CSS o templates incluyen erroneamente el siguiente código:

        *:focus {
            outline: 0;
        }
                    

Solución: No eliminar el outline del navegador, o proveer uno de mayor contraste.

Beneficios de la navegación mediante teclado

• Permite la navegación y utilización del sitio a personas con alguna discapacidad motora.
• Permite el acceso a las personas con dificultades visuales porque este grupo también requiere de la utilización del teclado para navegar una Web.
• Aumenta la productividad de los usuarios en la utilización del sitio. Cuando una aplicación permite la utilización de atajos de teclado y la operabilidad utilizando el mismo esta se vuelve más productiva.

Contraste de colores y texto legible

Barreras de accesibilidad

• Personas con moderada o baja visión y personas con algún grado de daltonismo pueden encontrar dificultad en leer texto con bajo contraste.
• Personas con dificultades cognitivas, del lenguaje o de aprendizaje pueden no percibir el texto y/o perder el foco de lectura si el texto es presentado de una manera que sea compleja de leer.
• Personas con dificultades en la visión o en la comprensión de texto pueden enfrentar problemas en mantener el foco y seguir el flujo de largas líneas de texto o si es necesario realizar scroll horizontal para poder continuar leyendo el texto presentado en pantalla.

Soluniones

• Las líneas de texto deben contener un número aproximado de 80 carácteres.
• El alto de cada línea (line-height) debe ser al menos de una vez y media (1.5em) del tamaño de la fuente.
• El contraste de color entra la fuente y el color de fondo tiene que ser suficiente.

Beneficiones de mejorar la legibilidad

• Disminuir la cantidad de rebotes en las páginas Web, haciendo que el texto sea más agradable y fácil de leer.
• Permitir el acceso a personas con dilexia, personas con problemas en la visión o personas con problemas de aprendizaje.
• Mejora la visualización en ambientes de mucha luz o con dispositivos en modo de ahorro de energía activado.

Mitos sobre Accesiblidad Web

• MITO: Es incompatible con JavaScript. Sin embargo, por ejemplo el 98% de personas que navegan utilizando un lector de pantalla, tienen JavaScript activado [fuente].
• MITO: Convierte a los sitios web en feos y aburridos. Sin embargo, con el mismo código HTML se pueden hacer maravillas de diseños solo con CSS [ejemplos en Zen Garden]. Únicamente hay que evitar introducir barreras con nuestro CSS.
• MITO: Requiere mucho más tiempo. Pero si se incluye dentro del proceso de desarollo no debería aumentar el costo de las soluciones.
• MITO: No aporta ningún beneficio extra. Mejora la usabilidad y las conversiones de nuestro sitio al mismo tiempo que los tiempos de carga y el SEO.

Herramientas

• Validadores de pautas de accesibilidad
  • HTML CodeSniffer
  • Accesibility developer toolbar
• Lectores de pantallas
  • Chrome Vox
  • Orca
  • NDVA
• Otros
  • "Machete" WCAG 2.0
  • Calculadora de ancho de línea (legibilidad de texto)
  • Calculadora de contraste de texto
  • Simulador de daltonismo en páginas web
  • Simulador de daltonismo en imágenes

Resumen - Autoevaluación

¿Es el sitio accesible mediante teclado? ¿El focus de los elementos es el esperado? ¿Los atajos del teclado son facilmente predecibles?

¿Es el contenido comprensinble sin imágenes?

¿Necesito tener activado el sonido para poder usar el sitio?

¿El sitio se visualiza correctamente en modo de alto contraste? ¿Existe el contraste suficiente entre los colores de fondo y de fuentes? ¿Necesito distinguir colores para usar el sitio?

Resumen - Soluciones

• Otorgar a cada elemento la etiqueta HTML que le corresponda, utilizando el lenguaje de una manera válida.
• Etiquetar correctamente todo campo de entrada de un formulario.
• Proveer alternativas textuales a elementos visuales, utilizando el atributo alt de manera correcta y CAPTCHA accesibles.
• Permitir el acceso y utilización de cada elemento en una Web mediante teclado
• El contenido del sitio tiene que ser legible.

Preguntas

Cortesía de Jay Gooby

Gracias

Accesibilidad es pensar en todos

Contacto